<template>
  <el-dialog destroy-on-close title="vpn配置" width="40%" :visible.sync="dialogAddDeviceForm" @close="onClose">
    <el-form ref="formName" :model="vps" label-width="100px" class="demo-dynamic">
      <el-form-item label="V2链接" > 
        <uploader :options="options"
      @file-added="fileAdded" 
      @file-error="fileError" 
      @file-success="fileSuccess"  
      @file-removed="removed"  
      @file-progress="progress"  
      class="uploader-example">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>上传txt</p>
            <uploader-btn>选择文件</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>
      <div v-for="(domain, index) in vps.vpnUser" :key="domain.key">
        <el-form-item label="q账号" :prop="'vpnUser.' + index + '.username'"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }">
          <el-input style="width: 230px;margin-right: 10px;" v-model="domain.username" autocomplete class="inp"
            placeholder="请输入账号" />
          <el-button type="danger" icon="el-icon-delete" circle @click.prevent="removeDomain(domain)" />
        </el-form-item>

        <el-form-item label="q密码" :prop="'vpnUser.' + index + '.passwd'"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }">
          <el-input v-model="domain.passwd" autocomplete class="inp" placeholder="请输入密码" />
        </el-form-item>

        <el-form-item label="q最高在线数" :prop="'vpnUser.' + index + '.maxOnline'"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }">
          <el-input v-model="domain.maxOnline" autocomplete class="inp" placeholder="最高在线数" />
        </el-form-item>
      </div>

      <el-divider />
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" type="primary" @click="addDomain">新增分组</el-button>
      <el-button :loading="loading" type="primary" @click="submitForm('formName')">确 定</el-button>
      <el-button :loading="loading" @click="handleeviceCacel('formName')">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean
    }
  },
  data() {
    return {
      dialogAddDeviceForm: false,
      loading: false,
      options: {
        target: `/api/cloud_data/upload/vpnv2`,
        testChunks: false,
        chunkSize: 1024 * 1024 * 2,  //1MB
        simultaneousUploads: 3, //并发上传数
        headers: {
          'access-token': 'abcd1234'
        },
      },
      vps: { 
        vpnUser: [
          {
            username: '',
            passwd: '',
            maxOnline: ''
          }
        ]
      },
    //   options: []
    }
  },
  created() {
    this.details()
  },
  methods: {
    // 添加了一个文件的事件，一般用作文件校验
    fileAdded(file) {
          console.log(file);
        },
        //文件上传过程出错 
        fileError(rootFile, file, message, chunk) {
          console.log(rootFile, file, message, chunk);
        },
        // 文件成功上传，第一个参数rootFile是或包含File对象，file是File对象，message是服务端响应内容字符串，chunk是chunk实例，应该是本文件最后一个块实例。chunk.xhr.status就是这个文件上传的响应码
        fileSuccess(rootFile, file, message, chunk) {
          console.log(rootFile, file, message, chunk);
        },
        // 一个文件被移除
        removed(file){
          console.log(file);
        },
        // 一个文件正在上传事件
        progress(rootFile, file, message){
          console.log(rootFile, file, message);
        },
    details() {
      this.$http.get(`/api/cloud_data/get/vpn`).then(res => {
        if (res.success) {
          this.vps = res.data
        }
      });
    },
    // 新建树弹窗取消
    handleeviceCacel(formName) {
      this.$refs[formName].resetFields({})
      this.dialogAddDeviceForm = false
    },
    open() {
      this.dialogAddDeviceForm = true
    },
    onClose() {
      this.$refs.formName.resetFields({})
      this.loading = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http.post(`/api/cloud_data/save/vpn`, this.vps).then(res => {
            console.log('res', res)
            if (res.success) {
              this.loading = false
              this.$success('新建成功')
              this.dialogAddDeviceForm = false
            } else {
              this.$error(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    removeDomain(item) {
      var index = this.vps.vpnUser.indexOf(item)
      if (index !== -1) {
        this.vps.vpnUser.splice(index, 1)
      }
    },
    addDomain() {
      this.vps.vpnUser.push({
        username: '',
        passwd: '',
        maxOnline: '',
      })
    }
  }
}
</script>

<style lang="less" scoped>
.inp {
  margin-bottom: 5px;
}

.dialog-footer {
  text-align: center;
}
/deep/ .uploader-example {
  // width: 620px !important;
  width: 100%!important;
}
</style>
